<template>
  <views class="agent_rate">
    <div class="head_title">费率设置</div>

    <!-- 查看费率start -->
    <el-dialog 
    title="费率信息" 
    :visible.sync="dialogTableVisible" 
    :close-on-click-modal="false" 
    :before-close="changeDialogTableVisible">
      <span>标准费率：{{agentRate.standard_rate}}</span>
      <el-table
        :data="agentRate.rate_list"
        v-if="agentRate.agent_region_type != '不累计'"
        :header-cell-style="{background:'#f9f9f9'}"
      >
        <el-table-column property="range" label="费率政策" width="300"></el-table-column>
        <el-table-column property="region_rate" :label="agentRate.agent_region_type"></el-table-column>
      </el-table>
      <el-table
        :data="agentRate.do_logs"
        stripe
        :header-cell-style="{background:'#f9f9f9'}"
        v-if="agentRate.do_logs.length > 0"
      >
        <el-table-column property="facilitator_user_name" label="操作员" width="100"></el-table-column>
        <el-table-column property="do_time" label="操作时间" width="200"></el-table-column>
        <el-table-column property="content" label="描述" width="500"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 查看费率end -->


    <!-- 编辑费率start -->
    <el-dialog title="费率信息" :visible="editTableVisible" @close="changeEditTableVisible">
        <div class="agent_rate_edit flex center">
            <div class="left">
                <span>*</span>标准费率:
            </div>
            <div class="right">
                <el-input type="text" size="mini" clearable placeholder="请输入标准费率值" ref="standard_rate" v-model="agentRate.standard_rate" ></el-input>
            </div>
        </div>
        <div class="agent_rate_edit flex center">
            <div class="left">
                <span>*</span>费率政策:
            </div>
            <div class="right">
                <el-select v-model="agentRate.region_type" size="mini" @change="updateRegionType" >
                    <el-option
                    :selected="agentRate.region_type == item.value"
                    v-for="item in region_type_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                </el-select>
            </div>
        </div>
        <div class="agent_rate_edit flex flexC" v-show="isShowRegion">
            <div class="region_header flex flexJ">
                <div><span>*</span>阶梯费率</div>
                <div class=" icon flex flexJ">
                    <i class="el-icon-circle-plus-outline" @click="add_input"></i>
                    <i class="el-icon-remove-outline" @click="remove_input"></i>
                </div>
            </div>
            <div class="flex flexC flexJp" ref="region_body">
                <div class="region_body_input flex flexJ " v-for="(item, index) in agentRate.rate_list" :key="index" >
                    <div class="left">
                        <el-input type="text" size="mini" clearable placeholder="请输入起始金额" v-model="item.money_region_start" ></el-input>元 -
                        <el-input type="text" size="mini" clearable placeholder="请输入截至金额" v-model="item.money_region_end"></el-input>元
                    </div>
                    <div class="right">
                        费率:
                        <el-input type="text" size="mini" clearable placeholder="请输入阶梯费率" v-model="item.region_rate" />
                    </div>
                </div>
            </div>
        </div>
        <div class="agent_rate_edit flex center flexRr">
            <el-button  @click="editTableVisible = !editTableVisible">取消</el-button>
            <el-button type="primary" @click="submitAgentRate">保存</el-button>
        </div>
    </el-dialog>

    <!-- 编辑费率end -->



    <div class="table_data">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#f9f9f9'}"
      >
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="agent_name" label="企业名称" width="200"></el-table-column>
        <el-table-column prop="standard_rate" label="标准充值费率"></el-table-column>
        <el-table-column label="查看费率" width="100">
          <template>
            <el-button type="primary" @click="look">{{buttonText}}</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </views>
</template>





<script>
export default {
  name: "AgentRate",
  props: {
    agent_id: 0,
    type: 0 //0：查看、1：新增、 2：编辑
  },
  data() {
    return {
      dialogTableVisible: false,            //是否打开查看费率弹窗
      editTableVisible: false,        //编辑费率
      isShowRegion: false,              //是否展示阶梯费率
      region_type_list:[{value:0, label:'不累计'},{value:1, label:'按月累计'},{value:2, label:'按年累计'}],         //费率政策（0：不累计、1：按月累计、2：按年累计）
      agentRate: {
        //查看企业费率
        standard_rate: "", //标准费率
        rate_list: [], //阶梯费率
        do_logs: [], //操作日志
        agent_region_type: "" //费率政策
      },
      tableData: [
        //代理商名称、标准费率信息
        {
          agent_name: "", //代理商名称
          standard_rate: "" //标准费率
        }
      ]
    };
  },
  computed: {
    buttonText() {
      return this.type > 0 ? "编辑" : "查看";
    }
  },
  watch: {
    agent_id(newVal, oldVal) {
      console.log("come here_new_val", newVal);
      this.agent_id = newVal;
      this.getRate();
    }
  },
  mounted() {
    if (parseInt(this.agent_id) > 0) {
      this.getRate();
    }
  },
  methods: {
    getRate() {
      let { code, msg, data } = this.$api.sendSync(this.$mapapi.f_agentRate, {
        agent_id: this.agent_id
      });
      if (code != 200&&code!=501) {
        this.$message.error(msg);
        return
      }
      this.tableData = [
        { agent_name: data.agent_name, standard_rate: data.standard_rate }
      ];
      this.agentRate = data;
    },
    changeDialogTableVisible() {
      console.log("come change_dialog");
      this.dialogTableVisible = false;
    },
    changeEditTableVisible(){
      this.editTableVisible = false;
    },
    updateRegionType(){     //切换费率政策时，控制下面的阶梯费率是否显示
        if(this.agentRate.region_type){
            this.isShowRegion = true;
        }else{
            this.isShowRegion = false;
        }
    },
    add_input(){            //阶梯费率中增加一行阶梯费率input 框，暂设最多5个阶梯
        if(this.agentRate.rate_list.length > 4)    return;
        this.agentRate.rate_list.push({'money_region_start':'', 'money_region_end':'', 'region_rate':''});
    },
    remove_input(){         //阶梯费率中移除最后一行阶梯费率input 框
        if(this.agentRate.rate_list.length === 1)   return;
        this.agentRate.rate_list.pop();
    },
    look() {
      //查看费率
      if(this.type == 0){
          console.log('come in');
          this.dialogTableVisible = true;
      }else{
          console.log('come here');

          this.editTableVisible = true;
      }      
      let { code, msg, data } = this.$api.sendSync(this.$mapapi.f_agentRate, {
            agent_id: this.agent_id
      });
      if (code != 200&&code!=501) {
        this.$message.error(msg);
        return
      }
      this.tableData = [
        { agent_name: data.agent_name, standard_rate: data.standard_rate }
      ];
      this.agentRate = data;
      if (this.agentRate.rate_list.length > 0) {
            this.isShowRegion = true;
            for (let val of this.agentRate.rate_list) {
            //将阶梯费率起始、结束金额做成合成一个字段 range
            val.range = val.money_region_start + "~" + val.money_region_end;
            }
      }
    },

    submitAgentRate(){         //保存编辑企业费率信息
        let post_data = {};
        if(this.agentRate.standard_rate == ''){
            this.$message.error('标准费率不得为空');
            this.$refs.standard_rate.focus();
            return;
        }
        if(parseInt(this.agentRate.region_type) > 0){           //如果费率政策大于0，则传 阶梯费率数据
            post_data.rate_list = this.agentRate.rate_list;
        }
        post_data.region_type = this.agentRate.region_type;
        post_data.standard_rate = this.agentRate.standard_rate;
        post_data.agent_id = this.agent_id;

        let {code, msg}   =   this.$api.sendSync(this.$mapapi.f_saveAgentRate, post_data);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return
        }else{
            this.$message.success(msg);
        }
        this.editTableVisible = false;
        this.getRate();
    }
  }
};
</script>
<style lang="less" :scope="true">
.agent_rate {
  // margin: 10px;
  padding: 0;
  background: #fff;
  font-size: 14px;

  .head_title {
    width: 70px;
    text-align: right;
    border-left: 2px solid #4280f2;
  }

  .table_data {
    margin: 25px 15px 25px 15px;
  }


  .agent_rate_edit{
        width: 100%;
        margin-bottom: 14px;
        .region_header{
            color: #4280f2;
            .icon{
                width: 50px;
                i{
                    width: 20px;
                    font-size: 20px;
                }
            }
        }
        .region_body_input{
            width: 100%;
            flex-wrap: nowrap;
            margin-top:10px;
            .left{
                width: 65%;
                .el-input{
                    width:130px;
                }
            }
            .right{
                width: 32%;
                .el-input{
                    width:120px;
                }
            }
        }

        .left{
            span{color: red}

            width: 80px;
        }
        .right{
            width: 350px;

            .el-date-editor{
                width:350px;
            }
            .el-input{
                width:350px;
            }
        }
    }
}
</style>